<template>
    <div class="order_details_wrap">
        <header-test name="订单详情" :back="'/my-order'" />
        <div class="order_details">
            <div class="order_info">
                <div><label>订单状态：</label>{{ detailData?.orderStatusString }}</div>
                <div><label>订单方式：</label>{{ detailData?.payTypeString }}</div>
                <div><label>订单编号：</label>{{ detailData?.orderNo }}</div>
                <div><label>下单时间：</label>{{ detailData.createTime }}</div>
                
            

                <van-button
                    v-if="detailData.orderStatus == 3"
                    style="margin-bottom:10px"
                    color="#1baeae"
                    block
                    @click="handleConfirmOrder"
                >确认收货</van-button>
                <van-button
                    v-if="detailData.orderStatus == 0"
                    style="margin-bottom:10px"
                    color="#1baeae"
                    block
                    @click="goToPay"
                >去支付</van-button>
                <van-button
                    v-if="!(detailData.orderStatus<0||detailData.orderStatus ==4)"
                    block
                    @click="handelCancelOrder"
                >取消订单</van-button>
        
            </div>
            <div class="delivery_type">
                <div>
                    <label>商品单价：</label>
                    <span>{{ detailData.newBeeMallOrderItemVOS?.[0]?.sellingPrice }}</span>
                </div>
                <div>
                    <label>商品数量：</label>
                    <span>{{ detailData.newBeeMallOrderItemVOS?.[0]?.goodsCount }}</span>
                </div>
                <div>
                    <label>商品金额：</label>
                    <span>
                        {{ detailData.newBeeMallOrderItemVOS?.[0]?.goodsCount * 
                            detailData.newBeeMallOrderItemVOS?.[0]?.sellingPrice
                        }}
                    </span>
                </div>
                <div><label for="">配置方式：</label>普通快递</div>
            </div>
            <div class="order_good_info">
                <img src="" alt=""/>
                <div></div>
            </div>
        </div>
        <div class="pop_order">
            <van-popup
            >
                <div class="pop_order_con">
                    <van-button
                        type="primary"
                        block
                        @click="handlePayOrder({ payType:1 })"
                    >
                        支付宝支付
                    </van-button>
                    <van-button
                        plain
                        class="wx_btn"
                        @click="handlePayOrder({ payType:2 })"
                    >
                        微信支付
                    </van-button>
                </div>
            </van-popup>
        </div>
    </div>
</template>

<script>
import { reactive,toRefs } from "@vue/reactivity";
import { useRoute,useRouter } from "vue-router";
import { getOrderDetail,cancelOrder,payOrder } from "@/service/order";
import { onMounted } from "@vue/runtime-core";
import HeaderTest from "@/components/HeaderTest.vue";
import { Dialog,Toast } from "vant";
import { getDetail } from "@/service/good";

export default {
    setup() {
        const route = useRoute();
        const router = useRouter();
        const { orderNo } = route.query;
        const state = reactive({
            detailData: {},
            show:false,
        });
        const init = async () => {
            const { data } = await getOrderDetail(orderNo);
            state.detailData = data;
        };
        onMounted(async ()=>{
            init();
        });
        const handelCancelOrder = async() => {
            try {
                const res = await Dialog.confirm({
                    title:"确定要取消吗？",
                });
                if(res === "confirm"){
                    await cancelOrder(orderNo);
                    init();
                }

            }catch(error){
                console.log(error);
            }
        };
        const goToPay = () => {
            state.show = !state.show;
        };
        const handlePayOrder = async ({ payType })=>{
            try {
                await payOrder({
                    orderNo:orderNo,
                    payType,
                });
                Toast.success("支付成功");
                router.push("/order-details");
                state.show=!state.show;
            } catch(error) {
                console.log(error);
                Toast.success("支付失败！");
            }
        };
        return {
            ...toRefs(state),
            handelCancelOrder,
            handlePayOrder,
            goToPay,
        };
    },
    components: {HeaderTest},
};
</script>

<style lang="less" scoped>
.order_details_wrap {
    background: #f7f7f7;
    .order_details {
        > div {
            text-align: left;
            margin-bottom: 1rem;
            background: white;
            padding: 1rem;
        }
        label {
            color: #999;
        }
        .order_info {
            > div {
                margin-bottom: 0.5rem;
            }
            .cancel_btn {
                height: 2.5rem;
                line-height: 2.5rem;
                font-size: 0.9rem;
                margin: 0 auto;
                text-align: center;
                width: 100%;
                border: 1px solid #e3e1e1;
            }
        }
        .delivery_type {
            box-sizing: border-box;
            > div {
                margin-bottom: 0.5rem;
            }
        }
        .order_good_info {
            height: 6.5rem;
            display: flex;
            justify-content: space-between;
        }
    }
    .pop_order {
        display: flex;
        padding: 30% auto;
        .pop_order_con {
            width: 90%;
            margin:15% auto;
            overflow: hidden;
        }
        .wx_btn {
            background: rgb(79, 192, 141);
            width: 100%;
            color: white;
            margin-top: 1.5rem;
        }
    }
}

</style>